<template>
    <el-dialog v-model="visible" title="号码组合一览" width="400" draggable overflow @closed="onClosed">
        <div class="text-base">
            <el-button type="info" size="small" class="mr-2" @click="onCalc" :loading="isLoading">显示明细</el-button>
            共 {{ data.rowsCount }} 注，金额：{{ data.amount }} 元
        </div>
        <div class="mt-2 max-h-450px overflow-y-auto">
            <table class="border-collapse">
                <thead>
                    <tr>
                        <th class="px-3 border border-solid border-slate-300 text-base font-normal">#</th>
                        <th class="px-3 border border-solid border-slate-300 text-base font-normal">号码</th>
                        <th class="px-3 border border-solid border-slate-300 text-base font-normal">和值</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, idx) of data.list" :key="idx">
                        <td class="px-3 border border-solid border-slate-300 text-base">{{ idx + 1 }}</td>
                        <td class="px-3 border border-solid border-slate-300 text-base">{{ item.text }}</td>
                        <td
                            class="px-3 border border-solid border-slate-300 text-base flex justify-between items-center">
                            <span class="mr-2">{{ item.sum }}</span>
                            <span :class="item.diffSum > 0 ? 'text-green-600 icon-plus' : 'text-red-400'">
                                {{ item.diffSum }}
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </el-dialog>
</template>

<script setup>
import { sum_info } from "@/config/dlt-config";
import DltOrderModel from '@/model/DltOrderModel';
import { combinationCount } from '@/utils/Utils';
import { ElMessageBox } from 'element-plus';
import { ref, watch } from 'vue';

const dltOrderModel = new DltOrderModel();

// 购物车排列组合数据
const data = ref({
    rowsCount: 0,
    amount: 0,
    list: [],
});
const isLoading = ref(false);

const visible = defineModel();

const props = defineProps({
    data: Array
})

watch(() => props.data, val => {
    data.value.rowsCount = combinationCount(val);
    data.value.amount = data.value.rowsCount * 2;
})

const combinationFn = () => {
    return new Promise(reslove => {
        let sum = 0;
        data.value.list = dltOrderModel.combination(props.data).map(arr => {
            sum = arr.reduce((a, b) => { return parseInt(a) + parseInt(b) });
            return {
                text: arr.join(' '),
                sum,
                diffSum: sum - sum_info.All,
            }
        });
        data.value.rowsCount = data.value.list.length;
        data.value.amount = data.value.rowsCount * 2;
        reslove();
    })
}

const onCalc = () => {
    if (data.value.rowsCount > 10000) {
        ElMessageBox.confirm(
            `共 ${data.value.rowsCount} 种组合，数据过大，请调整购物车数据！继续执行可能造成程序停止响应，确定要继续吗？`,
            '警告',
            {
                confirmButtonText: '执行',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            isLoading.value = true;
            combinationFn().then(() => {
                isLoading.value = false;
            })
        })
        return;
    }
    isLoading.value = true;
    combinationFn().then(() => {
        isLoading.value = false;
    })
}

const onClosed = () => {
    data.value.rowsCount = 0;
    data.value.amount = 0;
    data.value.list = [];
}
</script>